import { ConfigProvider, theme } from 'antd';
import Root from '@/gui/root'
import { Provider } from 'react-redux';
import store, { AppDispatch } from '@/store'
import { useEffect } from 'react';
import EventEmitter from '@/utils/events'
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn';
import { MessageProvider } from '@/context/message/main';
import CommandFileOpen from './core/command/file/open';
import { CanvasSize } from './reducers/canvasSlice';
dayjs.locale('zh-cn')


export type GlobalEventTypes = 'mousedown' | 'mousemove' | 'mouseup' | 'keydown' | 'keyup' | 'contextmenu';
export type GlobalEventObject = {
  [K in GlobalEventTypes]: (this: Window, e: WindowEventMap[K]) => any;
}

export const globalEmitter = new EventEmitter();  // 全局事件
export const activeEmitter = new EventEmitter();  // 激活类事件
export const onAppCanvasReady = (rasterDOMRect: CanvasSize, dispatch: AppDispatch) => {
  CommandFileOpen.open('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/23e45de66239ff0e5c4d35f5812be39f.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080', rasterDOMRect, dispatch)
}


const globaleEventObject: GlobalEventObject = {
  mousedown: (e) => {
    globalEmitter.emit('mousedown', e);
    activeEmitter.emit('mousedown', e);
  },
  mousemove: (e) => {
    globalEmitter.emit('mousemove', e);
    activeEmitter.emit('mousemove', e);
  },
  mouseup: (e) => {
    globalEmitter.emit('mouseup', e);
    activeEmitter.emit('mouseup', e);
  },
  keydown: (e) => {
    switch(e.code){
      case 'F1':
      case 'F3':
      case 'F4':
        e.preventDefault();
        break;
    }
    globalEmitter.emit('keydown', e);
    activeEmitter.emit('keydown', e);
  },
  keyup: (e) => {
    globalEmitter.emit('keyup', e);
    activeEmitter.emit('keyup', e);
  },
  contextmenu: (e) => {
    e.preventDefault();
    globalEmitter.emit('contextmenu', e);
    activeEmitter.emit('contextmenu', e);
  }
}

const addGlobalEventListen = () => {
  window.addEventListener('mousedown', globaleEventObject.mousedown, false)
  window.addEventListener('mousemove', globaleEventObject.mousemove, false)
  window.addEventListener('mouseup', globaleEventObject.mouseup, false)
  window.addEventListener('keydown', globaleEventObject.keydown, false)
  window.addEventListener('keyup', globaleEventObject.keyup, false)
  window.addEventListener('contextmenu', globaleEventObject.contextmenu, false)
}

const removeGlobalEventListen = () => {
  window.removeEventListener('mousedown', globaleEventObject.mousedown)
  window.removeEventListener('mousemove', globaleEventObject.mousemove)
  window.removeEventListener('mouseup', globaleEventObject.mouseup)
  window.removeEventListener('keydown', globaleEventObject.keydown)
  window.removeEventListener('keyup', globaleEventObject.keyup)
  window.removeEventListener('contextmenu', globaleEventObject.contextmenu)
}


export default () => {
  useEffect(() => {
    addGlobalEventListen()

    return () => {
      removeGlobalEventListen()
    }
  }, [])

  return <>
    <Provider store={store}>
      <ConfigProvider 
        locale={zhCN}
        componentSize="small"
        theme={{
          algorithm: theme.darkAlgorithm,   // 暗色主题
          components: {
            Modal: {
              contentBg: '#36363b',
              headerBg: '#36363b',
            }
          }
        }}
      >
        <MessageProvider>
          <Root/>
        </MessageProvider>
      </ConfigProvider>
    </Provider>
  </>
}